<template>
  <div class="org-container-wrapper">
    <div class="org-left-menu">
      <el-menu
        default-active="营销组织"
        class="org-el-menu"
        background-color="#0F1920"
        text-color="#869FB1"
        active-text-color="#ffffff">
        <div v-for="(item,index) in menus" :key="index">
          <el-submenu :index="index+'a'" v-if="item.children">
            <template slot="title">
              <img :src="item.icon" alt="">
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="i.name" v-for="(i,idx) in item.children" :key="idx" @click="toUrl(i.link)">{{i.name}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item :index="index+'c'" v-else @click="toUrl(item.link)">
            <img :src="item.icon" alt="">
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </div>
    <div class="org-right-content">
      <router-view/>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        menus:[
          {
            name:"营销组织管理",
            icon: require('../../images/org-list.png'),
            showContent:true,
            children:[
              {name:"营销组织", link:'/full/organization/list'},
              {name:"岗位管理", link:'/full/organization/post'},
              {name:"职位管理", link:'/full/organization/position'},
            ]
          },
          {
            name:"用户权限管理",
            icon: require('../../images/org-user.png'),
            showContent:false,
            children:[
              {name:"用户管理", link:'/full/organization/user'},
              {name:"权限管理", link:'/full/organization/permission'},
            ]
          },
          {
            name:"产品信息管理",
            showContent:true,
            icon: require('../../images/org-production.png'),
            children:[
              { name:"产品信息管理", link:'/full/organization/production-management' }
            ],
          },
        ]
      }
    },
    methods: {
      // 当前路由
      ifActive(names){
        if(names==this.$route.path){
          return 'is-active'
        }else{
          return ''
        }
      },
      toUrl(url){
        this.$router.push({path: url});
      },
      menuToggle(index){
        this.menus[index].showContent = !this.menus[index].showContent
      }
    },
    mounted: function () {
      var url=(this.$route.path).split('/')[2]
      for(var i in this.menus){
        if(url && url.indexOf(this.menus[i].link)>=0){
          this.menus[i].showContent=true
        }
      }

    },
  }
</script>
<style scoped>
.org-container-wrapper {
  display: flex;
  min-height: calc(100% - 55px);
}
  .org-left-menu {
  flex: 200px 0 0;
  background-color: rgb(50, 58, 71);
}
  .org-right-content {
  flex: 1;
  overflow: hidden
}
</style>
<style lang="less">
.org-el-menu {
  .el-submenu > .el-menu {
    display: none;
    transition: all 0.3s;
  }
  .el-submenu.is-opened > .el-menu {
    display: block;
  }
}
</style>
